
<template>
	<div id="coupon">
		<div class=" clearfix">
					<div class="coupon-card" v-for="coupon in getCoupon">
						 <div class="top"
						 :style="'background-image: url('+$qiniu.url+'assets/img/coupon-0.png)'">
						 	  <h3>现金券</h3>
								<h1>￥{{coupon.size}}</h1>
						 </div>
							<div class="bottom"
							:style= "'background-image: url('+$qiniu.url+'assets/img/coupon-3.png)'">
								 <span>获得日期：{{coupon.created}}</span>
							</div>
					</div>

			<p class="empty" v-if="getCoupon.length == 0">您当前暂无优惠券</p>
		</div>
		<!-- <div class="btn-wrapper">
			<router-link class="btn" to="/user">返回我的资料页面</router-link>
		</div> -->
	</div>
</template>>
 <script>
import Loading from '../loading';
import {  refreshTitle } from "../../tools.js"

	export default {
		 components: {
             Loading,
        },
		 created() {
             refreshTitle(this.$route.meta.title);
             this.$store.dispatch('GET_COUPON');
        },
		 data (){
				return {

    		}
		},
		 computed:{
		 	LoadingShow() {
	            return this.$store.state.loadings.show
	        },
	    getCoupon() {
              return this.$store.state.coupon.coupons
        }
		 }
	}
 </script>

<style>
#coupon{
	.coupon-card {
		width: 88%;
		height:100px;
		margin: 1rem auto;
		.top {
		
		background-size: cover;
	    background-repeat: space;
    	color: #fff;
			height: auto;
			padding: 0.4rem;
      h3{
      	font-size: 1.3rem;
      	display: inline-block;;
				margin-left: 22%;
      }
			h1{
				font-size: 1.8rem;
				display: inline-block;
				margin-left: 18%;
			}
    }
		.bottom {
			
			color: #ccc;
			background-size: cover;
	    background-repeat: space;
			font-size: 0.8rem;
			padding: 0.2rem;
			span{
				display: block;
        margin-left:11%;
				margin-top: 9%;
			}
		}
  }
	.empty {
		color: #a8a8a8;
		text-align: center;;
		border-bottom: 0.1rem solid #a8a8a8;
		margin-top: 40%;
	}
	/*.btn-wrapper {
		text-align:center;
		border-radius: 0.6rem;
		background-color: #00BA9B;
		width: 88%;
		padding-bottom: 0.3rem;
		padding-top: 0.3rem;
		margin: 0 auto;
		.btn{
			color: #fff;
		}
	}*/
}
</style>
